<template>
  <div class="disaster_list">
    <div class="query">
      <div class="one">
        <span>统一编号</span>
        <el-input v-model="input1" style="width:200px" placeholder="请输入内容"></el-input>
      </div>
      <div class="one1">
        <span>名称</span>
        <el-input v-model="input2" style="width:200px" placeholder="请输入内容"></el-input>
      </div>
      <div class="one2">
        <span>行政乡镇</span>
        <el-select v-model="value" style="width:200px" placeholder="请选择">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="one3">
        <span>灾害类型</span>
        <el-select v-model="value" style="width:200px" placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="one4">
        <span>规模等级</span>
        <el-select v-model="value" style="width:200px" placeholder="请选择">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="one5">
        <span>险情等级</span>
        <el-select v-model="value" style="width:200px" placeholder="请选择">
          <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="one6">
        <span>威胁人口</span>
        <el-input v-model="input3" style="width:200px" placeholder="请输入内容"></el-input>
      </div>
      <div class="one7">
        <span>至</span>
        <el-input v-model="input4" style="width:200px" placeholder="请输入内容"></el-input>
      </div>
      <div class="one8">
        <span>威胁财产</span>
        <el-input v-model="input5" style="width:200px" placeholder="请输入内容"></el-input>
      </div>
      <div class="one9">
        <span>至</span>
        <el-input v-model="input6" style="width:200px" placeholder="请输入内容"></el-input>
      </div>
      <el-button>查询</el-button>
    </div>
    <div class="map_query_title">地图查询</div>
    <div class="map_query">
      <div class="check">
        <el-checkbox v-model="checked"></el-checkbox>
        <span>是否附图</span>
      </div>
      <el-button>多边形查询</el-button>
      <el-button>矩形查询</el-button>
      <el-button>圆形查询</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '0',
      input4: '0',
      input5: '0',
      input6: '0',
      options1: [{
        value: '选项1',
        label: '全市'
      }],
      options2: [{
        value: '选项1',
        label: '全部'
      }],
      options3: [{
        value: '选项1',
        label: ''
      }],
      options4: [{
        value: '选项1',
        label: ''
      }],
      value: '选项1',
      checked:false,
    }
  }
}
</script>
<style scoped lang="less">
.disaster_list{
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}
.disaster_list .query{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
  padding: 20px;
  box-sizing: border-box;
  .one,.one1,.one2,.one3,.one4,.one5,.one6,.one7,.one8,.one9{
    width: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .el-button{
    width: 200px;
    margin: 10px 0;
  }
}
.disaster_list .map_query{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid;
  height: 200px;
  padding-top: 10px;
  box-sizing: border-box;
  .el-button{
    width: 200px;
    margin: 10px 0 0;
  }
}
</style>
